<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:o="http://openfaces.org/"
	xmlns:a4j="http://richfaces.org/a4j">


	<script type="text/javascript">
		var offsetFeatures;
		
		function submitBearingDistance() {
			#{rich:element('nextPointBearing')}.value = #{rich:element('npBearing')}.value;
			#{rich:element('nextPointDistance')}.value = #{rich:element('npDistance')}.value;
			addBearingDistanceToBoundary();
		}
		
		function pickRefOffset() {
			getPickSinglePointControl().deactivate();
			
			getPickPointControl().events.remove('featureadded');
			getPickPointControl().events.register('featureadded', this, doneOffsetPicking);
			getPickPointControl().activate();
		}

		function setRefBearing() {
			var bearing = #{rich:element('refBearing')}.value;
			var radAngle = directionToRadAngle(bearing);
			if (radAngle == undefined || !isNumber(radAngle)) {
				alert('#{messages["txt.invalid_direction"]}');
				return;
			}

			var layer = offsetFeatures[0].layer;
			var newFeatures = setLineBearing(offsetFeatures[0], radAngle);
			layer.addFeatures(newFeatures[0]);
			
			offsetFeatures = addOffsetFeatures(newFeatures[0], offsetFeatures, false);
			setRefOffsetInputs();

			getPickPointControl().deactivate();
			method2SubmitRefPoint();
		}
		
		function setRefDistance() {
			var refDist = #{rich:element('refDistance')}.value;
			if (!isNumber(refDist)) {
				alert('#{messages["txt.invalid_numeric_format"]}');
				return;
			}
			
			var layer = offsetFeatures[0].layer;
			var newFeatures = setLineLength(offsetFeatures[0], refDist);
			layer.addFeatures(newFeatures[0]);
			
			offsetFeatures = addOffsetFeatures(newFeatures[0], offsetFeatures, false);
			setRefOffsetInputs();

			getPickPointControl().deactivate();
			method2SubmitRefPoint();
		}

		function doneOffsetPicking(evt) {
			var offsetFeature = evt.feature;
			var geom = offsetFeature.geometry;
			
			offsetFeatures = addOffsetFeatures(offsetFeature, offsetFeatures, false);
			setOffsetControls(geom,
					#{rich:element('initialRefPointY')},
					#{rich:element('initialRefPointX')},
					#{rich:element('refBearing')},
					#{rich:element('refDistance')});

			setRefOffsetInputs();

			getPickPointControl().deactivate();
			method2SubmitRefPoint();
		}

		function setRefOffsetInputs() {
			#{rich:element('refPointYInput')}.value = offsetFeatures[1].geometry.y;
			#{rich:element('refPointXInput')}.value = offsetFeatures[1].geometry.x;
			#{rich:element('resultingPointYInput')}.value = offsetFeatures[2].geometry.y;
			#{rich:element('resultingPointXInput')}.value = offsetFeatures[2].geometry.x;
		} 

		function resetMethod2Inputs() {
			#{rich:element('initialRefPointY')}.value = '';
			#{rich:element('initialRefPointX')}.value = '';
			#{rich:element('refBearing')}.value = '';
			#{rich:element('refDistance')}.value = '';
			#{rich:element('refPointYInput')}.value = '';
			#{rich:element('refPointXInput')}.value = '';
			#{rich:element('resultingPointYInput')}.value = '';
			#{rich:element('resultingPointXInput')}.value = '';

			offsetFeatures = null;
			getPickPointControl().deactivate();
			getPickPointControl().layer.destroyFeatures();
		}
	</script>
	
	<rich:toolBar height="20" itemSeparator="grid">
		<rich:toolBarGroup>
			<h:panelGroup>
				<o:commandButton type="button" onclick="submitBearingDistance()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Agregar rumbo/distancia
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/add-icon.png" />
				</o:commandButton>
				<o:commandButton type="button" onclick="deleteLastBoundaryPoint()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Borrar ultimo punto
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/delete-icon.png" />
				</o:commandButton>
				<o:commandButton type="button" onclick="clearBoundary()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Borrar todo
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/delete-all-icon.png" />
				</o:commandButton>
			</h:panelGroup>
		</rich:toolBarGroup>
		
		<rich:toolBarGroup location="right">
			<h:panelGroup>
				<o:commandButton type="button" onclick="">
					<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Dibujar frontera
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/draw-icon.png" />
				</o:commandButton>
			</h:panelGroup>
		</rich:toolBarGroup>
	</rich:toolBar>
	
	<table style="width: 100%">
		<tr valign="top">
			<td style="width: 50%">
				<!-- Left column -->
				<table style="width: 90%">
					<tr>
						<th colspan="2" align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Punto de Referencia" />
									</td>
									<td align="right">
										<a href="#" onclick="pickRefOffset()">#{messages['button.select']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialRefPointY" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" N" />
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialRefPointX" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" E" />
						</th>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Rumbo" />
									</td>
									<td align="right">
										<a href="#" onclick="setRefBearing()">#{messages['button.set']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="refBearing" value="" style="width: 100%"/>
						</td>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Distancia" />
									</td>
									<td align="right">
										<a href="#" onclick="setRefDistance()">#{messages['button.set']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="refDistance" value="" style="width: 100%"/>
						</td>
					</tr>
				</table>
			</td>
			
			
			<td style="width: 50%">
				<!-- Right column -->
				
				<table style="width: 90%">
					<tr>
						<th colspan="2" align="left">
							<h:outputText value="Siguiente punto" />
						</th>
					</tr>
					<tr>
						<th>
							Rumbo
						</th>
						<td>
							<h:inputText id="npBearing" value="#{dataEntryHelper.splitHelper.bearingDistance.bearing}" style="width: 100%"/>
						</td>
					</tr>
					<tr>
						<th>
							Distancia
						</th>
						<td>
							<h:inputText id="npDistance" value="#{dataEntryHelper.splitHelper.bearingDistance.distance}" style="width: 100%"/>
						</td>
					</tr>
				</table>
				
				<br />
				
				<div align="center">
					<!-- Border coordinates table -->
					<h:panelGroup id="bearingAndDistanceTable">
						<h:panelGroup rendered="#{empty dataEntryHelper.splitHelper.bearingAndDistances}">
							<br/>
							<h:outputText value="No se han ingresado puntos de la frontera" />
						</h:panelGroup>
						<h:panelGroup rendered="#{not empty dataEntryHelper.splitHelper.bearingAndDistances}">
							<h:outputText value="Punto de partida" />
							<br />
							<table>
								<tr>
									<th colspan="2">NORTE</th>
									<th colspan="2">ESTE</th>
								</tr>
									<tr>
										<td align="right">#{dataEntryHelper.splitHelper.startingPoint.y}</td>
										<th>N</th>
										<td align="right">#{dataEntryHelper.splitHelper.startingPoint.x}</td>
										<th>E</th>
									</tr>
							</table>
							<br />
							<div class="contentRights">
								<table>
									<tr>
										<th colspan="2">RUMBO</th>
										<th colspan="2">DISTANCIA</th>
									</tr>
									<ui:repeat var="bd" value="#{dataEntryHelper.splitHelper.bearingAndDistances}">
										<tr>
											<td align="right">
												<h:outputText value="#{bd.azimuth}">
													<f:convertNumber maxFractionDigits="6" minFractionDigits="6" locale="en-us" />
												</h:outputText>
											</td>
											<th>#{bd.direction}</th>
											<td align="right">
												<h:outputText value="#{bd.distance}">
													<f:convertNumber maxFractionDigits="6" minFractionDigits="6" locale="en-us" />
												</h:outputText>
											</td>
											<th>m</th>
										</tr>
									</ui:repeat>
								</table>
							</div>
						</h:panelGroup>
					</h:panelGroup>
				</div>
			</td>
		</tr>
	</table>


	<h:form>
		<h:inputHidden id="nextPointBearing" value="#{dataEntryHelper.splitHelper.bearingDistance.bearing}" />
		<h:inputHidden id="nextPointDistance" value="#{dataEntryHelper.splitHelper.bearingDistance.distance}" />
		<a4j:jsFunction
			name="addBearingDistanceToBoundary"
			action="#{dataEntryHelper.splitHelper.addBearingDistanceToBoundary}"
			reRender="drawBoundaryFunctions, coords, bearingAndDistanceTable"
			oncomplete="if (#{facesContext.maximumSeverity == null}) drawBoundaryReRender(); else #{rich:component('msgPanel')}.show();">
		</a4j:jsFunction>
	</h:form>
	
	<h:form>
		<h:inputHidden id="refPointYInput" value="#{dataEntryHelper.splitHelper.refPoint.y}" />
		<h:inputHidden id="refPointXInput" value="#{dataEntryHelper.splitHelper.refPoint.x}" />
		<h:inputHidden id="resultingPointYInput" value="#{dataEntryHelper.splitHelper.resultingPoint.y}" />
		<h:inputHidden id="resultingPointXInput" value="#{dataEntryHelper.splitHelper.resultingPoint.x}" />
		<a4j:jsFunction
			name="method2SubmitRefPoint"
			action="#{dataEntryHelper.splitHelper.applyRefOffset}"
			reRender="drawBoundaryFunctions, coords, bearingAndDistanceTable"
			oncomplete="if (#{facesContext.maximumSeverity == null}) drawBoundaryReRender(); else #{rich:component('msgPanel')}.show();">
		</a4j:jsFunction>
	</h:form>
</ui:component>
